<template>
	<view>
		<view class="inp">
			<input type="text" placeholder="女靴" @click="sou"/>
		</view>
		<view class="ju">
			<view class="left" >
				
				
				<scroll-view  scroll-y="true" class="scroll" >
									
				<view :class="index==i?'[color,leftOne]':'leftOne'" v-for="(item,index) in fen" :key="index" @click="add(item.id,index)">
										{{item.name}}
									</view>
									</scroll-view>
				
				
				
				
				
			</view>
			<view class="reight">
				<scroll-view  scroll-y="true" class="scroll" >
				<view  <view v-for="(item,index) in lie.children" :key="index">
					{{item.name}}
					
					<view class="reightOne1" >
						<view class="" v-for="(ite,index) in item.goods" :key="index" @click="xiang(ite.id)">
							<image :src="ite.picture" mode=""></image>
							<view>{{ite.name}}</view>
							<view class="">
								{{ite.price}}
							</view>
						</view>
					</view>
					<view class="reightOne">
					
					</view>
				</view>>
				
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		fen,
		login,
		xinlist
	} from '../../reques/api.js'
	export default {
		data() {
			return {
				fen: '',//一级列表
				i: 0,//判断下标
				lie: '',//二级列表
				shang:'',//商品数据
			};
		},
		created() {
			// 拿到一级列表
			fen({}).then(res => {
				//console.log(res.data.result);
				this.fen = res.data.result
				// this.lie = res.data.result[this.i].children
				// this.shang=res.data.result[this.i].goods
			})
			xinlist({id:1005000}).then(res=>{
				this.lie=res.data.result
				console.log(this.lie);
			})
			
		},
		methods: {
			//点击导航栏
			add(id,index) {
				xinlist({id:id}).then(res=>{
					this.lie=res.data.result
					console.log(this.lie);
				})
				//切换颜色 
				this.i = index
				// fen({}).then(res => {
				// 	this.lie = res.data.result[this.i].children//拿到二级分类
				// 	// console.log(res.data);
				// 	this.shang=res.data.result[this.i].goods
				// 	// console.log(this.shang);
				// })
			},
			xiang(id){
				
				uni.navigateTo({
					url:'../xiang/xiang?id='+id
				})
			},
			sou(){
				uni.navigateTo({
					url:'/pages/sou/sou'
				})
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #ccc;
	}
	.inp {
		background-color: #f3f4f4;
		color: #000;
		border-radius: 20rpx;
		margin: 20rpx 20rpx;
	}
	input {
		padding: 0 60rpx;
		box-sizing: border-box;
	}
	::placeholder {
		color: #000;
	}

	.ju{
		height: 500rpx;
		display: flex;
		justify-content: space-between;
		.left{
			width: 35%;
			// background-color: pink;
			height: 1000rpx;
			.scroll{
				height: 1000rpx;
			}
			.leftOne{
				width: 100%;
				height: 150rpx;
				text-align: center;
				line-height: 150rpx;
			}
		}
			
		.reight{
			width: 60%;
			height: 1000rpx;
			// background-color: skyblue;
			// .reightone{
			// 	display: flex;
				
				
			// }
			.scroll{
				height: 1000rpx;
			}
			image{
				width: 100rpx;
				height: 150rpx;
			}
			.reightOne1{
				display: flex;
				flex-wrap: wrap;
				>view{
					width: 30%;
					padding: 10rpx;
					box-sizing: border-box;
					font-size: 21rpx;
				}
			}
			.reightOne{
				width: 100%;
					// height: 200rpx;
			}
		}
	}
	.color{
		color: red;
		background-color: #f3f4f4;
	}
</style>